<template>
    <div>
        <div class="timeline timeline-clippy timeline-heptagon">
            <ul :style="{ height: screen_height - 60 + 'px' }">
                <div class="timeline__wrap_holder--a"></div>
                <li class="timeline__top_line">
                    <div>
                        <div></div>
                    </div>
                </li>
                <li v-for="(block, data) of time_block" :key="data">
                    <div class="timeline__holder">
                        <div></div>
                    </div>
                    <div v-for="(item, key) of block" :key="key">
                        <div class="timeline__blog_title">
                            <div class="timeline__blog_title--blog">
                                {{ item.blog_title }}
                            </div>
                            <div class="timeline__blog_title--msg">
                                <span
                                    class="timeline__blog_title--msg_d"
                                    @click="deleteBlog(item.blog_id)"
                                    >DEL.</span
                                >
                                <span> | </span>
                                <span
                                    class="timeline__blog_title--msg_r"
                                    @click="reWrite(item.blog_id)"
                                    >Rewrite.</span
                                >
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <span>{{ data }}</span>
                        </div>
                    </div>
                    <div class="timeline__holder">
                        <div></div>
                    </div>
                </li>
                <div class="timeline__wrap_holder--b"></div>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from "vue";
import { useRouter } from "vue-router";

const storeEP = inject("storeEP");
const axios = inject("axios");

//获取屏幕高度
const screen_height = ref();
onMounted(() => {
    var height =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight; //兼容性获取屏幕高度
    screen_height.value = height;

    window.onresize = () => {
        return (() => {
            screen_height.value =
                window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight; //兼容性获取屏幕高度
        })();
    };
});

// 获取对应的blog
const store_data = storeEP.state;
const blog_list = ref();
const getBlogs = async () => {
    let headers = {
        authorization: store_data.token,
    };
    let res_data = await axios.post("/blog/user", "", { headers: headers });
    blog_list.value = res_data.data;
    console.log(blog_list.value[0]);
    // console.log();
};
onMounted(async () => {
    await getBlogs();
    getTime_arr();
});

// 删除blog
const router = useRouter();
const deleteBlog = async (blog_id) => {
    let headers = {
        Authorization: store_data.token,
    };
    let res_msg = await axios.delete(`/blog/delete?blog_id=${blog_id}`, "", {
        headers: headers,
    });
    console.log(res_msg); // 提示消息
    await router.replace("/null");
    await router.push("/backstage/manage-blog");
};

// 修改blog
const reWrite = async (blog_id) => {
    await router.push({
        path: "/blog-editor",
        query: {
            blog_id: blog_id
        }
    })
};

// 格式化文章列表结构
const time_block = reactive({});
function getTime_arr() {
    let blog_back_data = null;
    let tmp_time_block = {};
    for (let blog of blog_list.value) {
        let blog_create_data = chengeStamp(blog.blog_create_time);
        let blog_title = blog.blog_title;
        let blog_id = blog.blog_id;

        if (blog_create_data === blog_back_data) {
            tmp_time_block[blog_id] = { blog_title, blog_create_data, blog_id };
        } else {
            tmp_time_block = {};
            tmp_time_block[blog_id] = { blog_title, blog_create_data, blog_id };
            time_block[blog_create_data] = tmp_time_block;
        }
        blog_back_data = blog_create_data;
    }
}

// 排序
function sortBy(field1, field2) {
    return (a, b) => {
        if (a.field1 == b.field1) {
            return a.field2 - b.field2;
        }
        return a.field1 - b.field1;
    };
}

// 获取时间
function chengeStamp(t) {
    var date = new Date(t * 1); // 这里将毫秒数乘于 1 转换为int
    let Y = date.getFullYear() + "-";
    let M =
        (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1
        )
            .toString()
            .padStart(2, "0") + "-";
    let D = date.getDate().toString().padStart(2, "0") + " ";
    return Y + M + D;
}
</script>

<style lang="scss" scoped>
// 滚动条样式
.timeline::-webkit-scrollbar {
    width: 6px;
}
.timeline::-webkit-scrollbar {
    height: 10px;
}
.timeline::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
}
.timeline::-webkit-scrollbar-thumb {
    background-color: rgb(179, 179, 179);
}
.timeline::-webkit-scrollbar-thumb:hover {
    background-color: #5749d2;
}

// 整体样式
.timeline {
    margin-left: 60%;
    box-shadow: -2px -2px 5px rgba(92, 92, 92, 0.4);
    // overflow: auto;
    // z-index: -1;
    overflow-y: scroll;
    overflow-x: hidden;
    .timeline__wrap_holder--a {
        padding: 30px 0;
    }
    .timeline__wrap_holder--b {
        padding: 20px 0;
    }
    ul {
        margin: 0 auto;
        .timeline__top_line {
            width: 0px;
            div {
                height: 0px;
            }
        }
        li {
            position: relative;

            list-style-type: none;
            width: 2px;
            // margin: 0 auto;
            background: #db345063;
            background-color: var(--main-color-b);

            .timeline__holder {
                height: 22px;
            }
            // background-color: #9e81cf;
            .timeline__blog_title {
                .timeline__blog_title--blog {
                    padding: 0px !important;
                    user-select: none;
                }
                .timeline__blog_title--msg {
                    padding: 0px !important;
                    span {
                        font-size: 26px;
                        font-weight: 100;
                        position: relative;

                        height: 10px;
                        width: 100px;
                        user-select: none;
                    }
                    .timeline__blog_title--msg_d:hover {
                        cursor: pointer;
                        color: #d249b2;
                    }
                    .timeline__blog_title--msg_r:hover {
                        cursor: pointer;
                        color: #5749d2;
                    }
                }
            }
            div {
                // filter: blur(1px);
                // z-index: 1;
                div {
                    width: 400px;
                    padding: 8px 0;
                    padding-left: 24px;
                    font-size: 18px;
                    font-weight: 600;
                    text-shadow: 2px 2px 5px rgb(194, 194, 194);
                    color: rgb(0, 0, 0);
                    span {
                        user-select: none;
                        position: absolute;
                        width: 70px;
                        transform: translate(0, -60%);
                        font-size: 12px;
                        font-weight: 100;
                        color: #616161;
                    }
                }
                div::before {
                    background-color: #00000000;
                }
            }
        }
        li::after {
            content: "";
            position: absolute;
            bottom: 0;
            transform: translate(-6px, 6px);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: inherit;
            z-index: 1;
        }
    }
}

// 图标样式
.timeline-clippy ul li::after {
    // background: rgb(48, 82, 146);
    background-color: var(--main-color-b);
    box-shadow: 2px 2px 5px rgba(92, 92, 92, 0.8);
    width: 14px;
    height: 14px;
    border-radius: 0;
}
.timeline-heptagon ul li::after {
    clip-path: polygon(
        0% 0%,
        0% 100%,
        25% 100%,
        25% 25%,
        75% 25%,
        75% 75%,
        25% 75%,
        25% 100%,
        100% 100%,
        100% 0%
    );
}
</style>
